<template>
  <div>
    <div class="app-container">
      <!-- 表格 -->
      <el-table :data="integralList" border stripe>
        <el-table-column type="index" width="50" />
        <el-table-column prop="borrowAmount" label="借款额度" />
        <el-table-column prop="integralStart" label="积分区间开始" />
        <el-table-column prop="integralEnd" label="积分区间结束" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link
            :to="'/core/integral-grade/edit/' + scope.row.id"
            style="margin-right:15px;"
            >
            <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >
              修改
            </el-button>
            </router-link>
             
            <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="remove(scope.row.id)"
            >
              删除
            </el-button>
           
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getList, removeById } from '@/api/core/integral-grade'
export default {
  data() {
    return {
      integralList: []
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      getList().then(response => {
        console.log(response)
        this.integralList = response.data.list
        console.log('integralList', this.integralList)
      }).catch(error =>{
        console.log(error)
      })
    },
    remove(id) {
       this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
         confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          return removeById(id)
        }).then(response => {
           this.$message({
          type: 'success',
          message: '删除成功!'
          });
          this.getDataList()
        })
        .catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
          });       
        });
    }
  }
}
</script>
<style scoped>
</style>